<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
        <van-button size="mini" type="info" @click="toggleEdit">{{isEdit?'取消':'编辑'}}</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item
        v-for="(channel,index) in myChannels"
        :key="channel.id"
        @click="choseChannel(index)">
          <span>{{ channel.name }}</span>
          <!-- v-show="isEdit && channel.id !==0"
          让推荐的x号不显示 -->
          <van-icon
          name="cross"
          class="btn"
          v-show="isEdit && channel.id !==0"
          @click.stop="delMychannel(index)"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item
        v-for="channel in optionalChannels"
        :key="channel.id"
        @click="addChannel(channel)">
          <span>{{ channel.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels } from '@/api/channels'
export default {
  name: 'ChannelEdit',
  props: {
    myChannels: {
      type: Array
    }
  },
  data () {
    return {
      isEdit: false, // 当前是否可以编辑
      allChannels: []
    }
  },
  mounted () {
    this.loadAllChannels()
  },
  computed: {
    optionalChannels () {
      // 根据所有频道和可选频道进行筛选算法逻辑
      // 根据我的频道中的每一项去所有频道中去匹配,如果匹配的上,那当前项不是需要的
      // 如果没有匹配上就是需要的  findIndex  filter
      return this.allChannels.filter((item) => {
        //   我和我所有匹配上时会返回index值  没有匹配上会返回-1
        const index = this.myChannels.findIndex((channel) => {
          return item.id === channel.id
        })
        // 将满足条件的返回
        if (index === -1) {
          return item
        }
      })
    }
  },
  methods: {
    //   切换编辑状态
    toggleEdit () {
      this.isEdit = !this.isEdit
    },
    // 发请求获取所有频道列表
    loadAllChannels () {
      getAllChannels().then(res => {
        this.allChannels = res.data.data.channels
      })
    },
    // 获取频道当前的index值传给父组件
    choseChannel (index) {
      console.log(index)
      this.$emit('chose-channel', index)
    },
    // 删除我的频道
    delMychannel (index) {
    //   1.操作本地  接口不可用
      this.myChannels.splice(index, 1)
    //   2.通知后端
    },
    // 点击我的可选项
    addChannel (channel) {
      //   1.操作本地
      this.myChannels.push(channel)
      //   2.通知后端
    }
  }
}
</script>

<style lang="less" scoped>
.channel {
  font-size: 13px;
}
.btn {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 14px;
  color:red;
}
</style>
